
<template>
  <div class="clientSalesReturn">
    <div class="clientSalesReturn_top">
      <p style="margin:2px 6px 0 0">客户</p>
      <input class="inp inp3" type="text" v-model="customerNo" @blur="customerNoBlur" :disabled="jxAgent">
      <div class="sty">
        <el-select v-model="customerName" @change="e=>{this.customerNo=e;}" :disabled="jxAgent">
          <el-option 
            v-for="item in customerList" 
            :key="item.value" 
            :label="item.label" 
            :value="item.value">
            <span style="float:left">{{item.value}}</span>
            <span style="float:right">{{item.label}}</span>
          </el-option>
        </el-select>
      </div>
      <p>仓库</p>
      <el-input style="width:3vw;margin-right:0.5vw;" v-model="warehouseNo" @blur="warehouseNoBlur"></el-input>
      <div class="sty">
        <el-select v-model="warehouseName" @change="e=>{this.warehouseNo=e}">
          <el-option v-for="item in warehouseList" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </div>
      <p>盘销类型</p>
      <div class="sty2">
        <el-select v-model="type">
          <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </div>
      <p>货号</p>
      <el-input v-model="kindsNumber" style="width:8vw"></el-input>
      <!-- <el-cascader collapse-tags clearable v-model="kindsNumber" :options="kindsNumberList" :props="props"></el-cascader> -->
      <p class="jl">盘销日期</p>
      <div class="block">
        <el-date-picker 
          style="width:8vw;" 
          v-model="inputDate" 
          type="date" 
          value-format="yyyy-MM-dd" 
          placeholder="选择日期">
        </el-date-picker>
      </div>
      <p class="jl">品牌</p>
      <div class="sty2">
        <el-select v-model="brandedName">
          <el-option v-for="item in brandList" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </div>
      
      <p class="jl">盘销序号</p>
      <el-input style="width:8vw;" v-model="inputSequence" disabled></el-input>
    </div>

    <div class="button_box">
      <el-button @click="search" type="primary" icon="el-icon-search">查询</el-button>
      <el-button @click="save" icon="el-icon-document-checked">保存</el-button>
    </div>

    <el-table 
      :data="tableData" 
      :header-cell-style="{background:'#f4f4f4',padding:0,height:'40px'}"
      :cell-style="{padding:0,height:'36px'}"
      highlight-current-row
      height="75.5vh"
      style="width: 100%"
      @row-click="rowClick">
      <el-table-column type="index" label="序号" width="50"></el-table-column>
      <el-table-column prop="kindsNumber" label="货号" width="180"></el-table-column>
      <el-table-column prop="colorName" label="颜色"></el-table-column>
      <el-table-column prop="sellingPrice" label="售价"></el-table-column>
      <el-table-column prop="customerRepertory" label="客户库存"></el-table-column>
      <el-table-column prop="discount" label="折数"></el-table-column>
      <el-table-column prop="onePrice" label="实收单价"></el-table-column>
      <el-table-column prop="brandedName" label="品牌"></el-table-column>
    </el-table>

    <foot-view class="footView">
      <div slot="text">
        <span>数据库：{{jxQuarter}}</span>
        <span>记录数：{{amount}}</span>
      </div>
    </foot-view>
  </div>
</template>


<script>
import footView from '../../../components/FootView'

import { getSearch, sellOrOut } from '../../../network/customerQuery'
import { getClient } from '../../../network/client'
import { getBranded } from '../../../network/branded'
import { getArtNo } from '../../../network/artNo'
import { getWarehouse } from '../../../network/warehouse'

import enterUp from '../../../components/mixins/enterUp'
import today from '../../../components/mixins/today'

export default {
  name: 'client_sales_return',
  mixins: [enterUp, today],
  data(){
    return{
      inpList: [],
      props: { multiple: true },

      customerNo: '',
      customerName: '',
      customerList: [],
      warehouseNo: '',
      warehouseName: '',
      warehouseList: [],
      type: 0,
      typeList: [
        {value:0, label: '盘销'},
        {value:1, label: '盘退'}
      ],
      kindsNumber: '',
      kindsNumberList: [],
      inputDate: this.searchDate(),
      brandedName: '',
      brandList: [],
      inputSequence: '',
      tableData: [],
      amount: 0,

      saveData: {},

      jxQuarter: null,
      jxAgent:null,
      operator:null,

      // jxQuarter: document.cookie.match(RegExp('jxQuarter'+'=([^;]+)'))[1],
      // jxAgent: document.cookie.match(RegExp('jxAgent'+'=([^;]+)'))[1] == 1 ? true : false,
      // operator: document.cookie.match(RegExp('jxUser'+'=([^;]+)'))[1]
    }
  },
  watch: {
    customerNo(a,b){
      this.customerNo = a.toUpperCase().trim()
    },
    kindsNumber(a,b){
      this.kindsNumber = a.toUpperCase().trim()
    },
    warehouseNo(a,b){
      this.warehouseNo = a.toUpperCase().trim()
    }
  },
  components:{
    footView
  },
  methods: {
    search(){
      if (!this.customerNo) {
        this.$message.warning('客户不能为空')
        return
      }
      // if (!this.warehouseNo) {
      //   this.$alert('仓库不能为空', '', {
      //     confirmButtonText: '确定'
      //   })
      //   return
      // }
      
      // let kn = ''
      // this.kindsNumber.forEach(e => {
      //   if (kn == '') {
      //     kn = `'${e[1]}'`
      //   }
      //   kn = `${kn},'${e[1]}'`
      // })
      this.saveData = {}
      let d = {
        branded: this.brandedName,
        customerNo: this.customerNo,
        // 盘销日期
        directSellingTime: this.inputDate,
        // directSellingTime: '2021-01-17',
        // 盘销类型(0：盘销 1：盘退)
        directSellingType: this.type,
        kindsNumber: this.kindsNumber,
        warehouseNo: this.warehouseNo
      }
      // console.log(d)
      getSearch(JSON.stringify(d)).then(res => {
        if (res.data.code == 200) {
          this.tableData = res.data.data
          this.amount = res.data.data.length
        } else {
          this.tableData = []
          this.amount = 0
          this.$message('暂无数据')
        }
      })
    },

    save(){
      // console.log(JSON.stringify(this.saveData))
      if (JSON.stringify(this.saveData) == "{}") {
        this.$message.warning('请选择一条数据保存')
        return
      }

      this.saveData.sequence = this.inputSequence

      let d = {
        branded: this.brandedName,
        customerNo: this.customerNo,
        // 盘销日期
        directSellingTime: this.inputDate,
        // 盘销类型(0：盘销 1：盘退)
        directSellingType: this.type,
        // 盘销的数据集合
        // directSellingVOList: [this.saveData],
        directSellingVOList: this.tableData,
        kindsNumber: this.saveData.kindsNumber,
        // kindsNumber: `'${this.saveData.kindsNumber}'`,
        warehouseNo: this.warehouseNo
      }
      // console.log(d)
      sellOrOut(JSON.stringify(d)).then(res => {
        if (res.data.code == 200) {
          this.$message({
            message: '保存成功',
            type: 'success'
          })
          this.kindsNumber = ''
          this.search()
          this.inputSequence = res.data.data
        } else {
          this.$message.error('保存失败')
        }
      })
    },

    // 客户编号失去焦点
    customerNoBlur(){
      if (this.customerNo) {
        for (const i of this.customerList) {
          if (this.customerNo == i.value) {
            this.customerName = i.label
            return
          }
        }
        this.$message.warning('无此客户编号')
        this.customerNo = ''
        this.customerName = ''
      } else {
        this.customerName = ''
      }
    },
    // 仓库编号失去焦点
    warehouseNoBlur(){
      if (this.warehouseNo) {
        for (const i of this.warehouseList) {
          if (this.warehouseNo == i.value) {
            this.warehouseName = i.label
            return
          }
        }
        this.$message.warning('无此仓库编号')
        this.warehouseNo = ''
        this.warehouseName = ''
      } else {
        this.warehouseName = ''
      }
    },

    rowClick(row){
      this.saveData = row
      this.inputSequence = ''
    }
  },
  created(){
    let jxQuarterVal = document.cookie.match(RegExp('jxQuarter' + '=([^;]+)'))
    let jxAgentVal = document.cookie.match(RegExp('jxAgent'+'=([^;]+)'))
    let operatorVal = document.cookie.match(RegExp('jxAgent'+'=([^;]+)'))
    this.jxQuarter = jxQuarterVal ? jxQuarterVal[1] : null
    this.operator = operatorVal ? operatorVal[1] : null
   if(jxAgentVal){
    this.jxAgent = jxAgentVal[1] == 1 ? true : false
   }
    
    this.inpList = this.getInput()
    // 获取所有客户信息
    this.customerList = []
    getClient({limit:99999}).then(res => {
      if (res.data.code == 200) {
        let list = res.data.data
        list.forEach(e => {
          if(e.stop != 1){
            this.customerList.push({value:e.no,label:e.name})
          }
        })
        if (this.jxAgent) {
          for (const i of this.customerList) {
            if (i.label == this.operator) {
              this.customerNo = i.value
              this.customerName = i.value
              break
            }
          }
        }
      }
    })
    // 获取品牌
    getBranded({limit: 99999}).then(res => {
      res.data.data.forEach(e => {
        this.brandList.push({value:e.name,label:e.name})
      })
    })
    // 获取仓库信息
    getWarehouse({limit: 99999}).then(res => {
      let list = res.data.data
      list.sort((a,b) => {
        return a.no.localeCompare(b.no)
      })
      list.forEach(e => {
        this.warehouseList.push({value:e.no,label:e.name})
        if (e.isMainWarehouse) {
          this.warehouseNo = e.no
          this.warehouseName = e.name
        }
      })
    })
  }
}
</script>

<style scoped>
  .clientSalesReturn {
    margin-right: 0.5vw;
    padding: 0 15px;
    background-color: white;
    height: 95vh;
    position: relative;
  }
  .clientSalesReturn_top{
    border-bottom: 2px solid #f4f4f4;
    padding: 1.5vh 0;
    white-space:nowrap;
  }
  .clientSalesReturn_top>div ,.clientSalesReturn_top p {
    display: inline-block;
  }
  .clientSalesReturn input:focus{
    outline: none;
    border: 1px solid #017aff;
  }
  .inp{
    border: 1px solid #dbdbdb;
    border-radius: 3px;
    height: 30px;
    padding: 0 5px;
  }
  .inp3{
    width: 3vw;
    margin-right: 0.5vw;
  }
  .jl{
      margin: 2px 6px 0 10px;
      display: inline-block;
  }
  .clientSalesReturn_top p:not(:first-child){
    margin: 2px 6px 0 10px;
    display: inline-block;
  }
  .button_box{
    margin: 1.5vh 0;
  }
  .footView span{
    float: left;
    margin-right: 48px;
    line-height: 6vh;
    font-size: 14px;
  }
  .footView span i{
    margin-right: 5px;
  }
</style>

<style>
  .clientSalesReturn .el-input__icon{
    line-height: 30px;
  }
  .clientSalesReturn .el-input__inner{
    height: 30px;
  }
  .clientSalesReturn .clientSalesReturn_top .sty .el-input__inner{
    height: 30px;
    width: 4.5vw;
  }
  .clientSalesReturn .clientSalesReturn_top .sty2 .el-input__inner{
    height: 30px;
    width: 8vw;
  }

  .clientSalesReturn .clientSalesReturn_top .block  .el-input__icon{
    height: 66%;
  }

  .clientSalesReturn .button_box .el-checkbox.is-bordered{
    padding: 4px 5px 9px 5px;
    height: 30px;
  }

  .clientSalesReturn .el-cascader .el-input__inner{
    height: 30px!important;
    width: 8vw;
  }
  .clientSalesReturn .el-cascader__tags .el-tag{
    max-width: 55%;
  }
</style>